<template>
    <div v-if="detailsVisible==true">
        <el-table :data="DataIn.personsTrue"  stripe border size="mini"   :highlight-current-row='true' :empty-text="showemptytext">
            <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-row :gutter="20">
                            <el-col :span="4">
                                <div class="showimg">
                                    <img :src="props.row.img">
                                    <!-- <progressive-img :src="props.row.img" /> -->
                                    <div class="demo-upload-list-cover" >
                                        <Icon type="ios-eye-outline"  title="预览" @click.native="handleView(props.row.img)"></Icon>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="16">
                                <el-form label-position="left" inline class="demo-table-expand">
                                    <el-form-item label="在职状态:">
                                        <span>{{ props.row.zztx }}</span>
                                    </el-form-item>
                                    <el-form-item label="文化程度:">
                                        <span>{{ props.row.wenhuan }}</span>
                                    </el-form-item>
                                    <el-form-item label="民族:">
                                        <span>{{ props.row.mingz }}</span>
                                    </el-form-item>
                                    <el-form-item label="手机号码:">
                                        <span>{{ props.row.phone }}</span>
                                    </el-form-item>
                                    <el-form-item label="身份证号:">
                                        <span>{{ props.row.personID }}</span>
                                    </el-form-item>
                                    <el-form-item label="党内职务:">
                                        <span>{{ props.row.zhiwu }}</span>
                                    </el-form-item>
                                    <el-form-item label="党内职务所在党委名:">
                                        <span>{{ props.row.banzjianshedwname }}</span>
                                    </el-form-item>
                                    <el-form-item label="党内职务所在支部名:">
                                        <span>{{ props.row.banzjianshedzbname }}</span>
                                    </el-form-item>
                                    <!-- <el-form-item label="党员积分:">
                                        <span>{{ props.row.jifen }}</span>
                                        
                                    </el-form-item> -->
                                    <el-form-item label="党员积分:">
                                        <a href="javascript:void(0);" @click="showDYJF(props.row)">查看积分</a>
                                    </el-form-item>
                                </el-form>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
            <el-table-column type="index" label="序号"  align="center" width="120" :index="indexf"></el-table-column>
            <el-table-column prop="truename" type="text" label="姓名" width="120" align="center" ></el-table-column>
            <el-table-column prop="sex" type="text" label="性别" width="80" align="center" sortable></el-table-column>
            <el-table-column prop="birthday" type="text" label="出生日期" width="100" align="center" sortable></el-table-column>
            <el-table-column prop="type" type="text" label="党内状态" width="100" align="center" sortable></el-table-column>
            <el-table-column prop="datain" type="text" label="入党时间" width="100" align="center" sortable></el-table-column>
            <el-table-column prop="zhuanzhentime" type="text" label="转正时间" width="100" align="center" sortable></el-table-column>
            <el-table-column prop="dangling" type="text" label="党龄" width="80" align="center" sortable></el-table-column>
            <el-table-column prop="dwname" type="text" label="所在党委" width="200" align="center" :show-overflow-tooltip='true' sortable ></el-table-column>
            <el-table-column prop="dzbname" type="text" label="所在党支部" width="200" align="center" :show-overflow-tooltip='true' sortable ></el-table-column>
            <el-table-column prop="xzzhiwu" type="text" label="行政职务" width="120" align="center" sortable></el-table-column>
            <el-table-column align="right" width="160px" >
                <template slot="header" slot-scope="scope" >
                    <el-button  size="mini"    @click="serch">查询</el-button>
                    <el-button  size="mini"    @click="addperson('add')" v-if="addperson_show==true" >添加</el-button>
                </template>
                <template slot-scope="scope">
                    <el-dropdown trigger="click" @command="handleCommand" v-if="addperson_show==true">
                        <span class="el-dropdown-link">操作<i class="el-icon-caret-bottom el-icon--right"></i></span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item class="clearfix" :command="{data:scope.row,typed:'edit'}">编辑</el-dropdown-item>
                            <el-dropdown-item class="clearfix" :command="{data:scope.row,typed:'tosomewhere'}">流转</el-dropdown-item>
                            <!-- <el-dropdown-item class="clearfix" :command="{data:scope.row,typed:'jifen'}">党员积分</el-dropdown-item> -->
                            <el-dropdown-item class="clearfix" :command="{data:scope.row,typed:'delete'}">删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
        <pagination @changed="showDataTrue" :recoder="DataIn.showpersons"> </pagination>
        <Modal title="预览图片" v-model="visible" style="z-index:2999">
            <img :src="imgsrc" v-if="visible" style="width: 100%">
        </Modal>
        <personedit ref='personedit' v-on:editResult="serch"></personedit>
        <personeditliuzhuan ref='personeditliuzhuan' v-on:editResult="serch"></personeditliuzhuan>

        <!-- v-on:editResult="serch" -->
        <dyjf ref='dyjf'  ></dyjf>
    </div>
</template>
<script>
    import personedit from './personedit.vue';
    import personeditliuzhuan from './personeditliuzhuan.vue';
    import {mapActions} from 'vuex';
    export default {
        data: () => ({
            detailsVisible: false, //当前dialog是否显示
            organizations:[],//单位名称s //从
            zhibu_organizations:[],//支部名称s
            DataIn:{
                showpersons:[], //ajax获取的
                personsTrue:[],//真正在表格里面显示的
            },
            offset: 0,
            addperson_show:false,//addperson_show
            showallFileds:false,//显示全部列
            showpersonimg:false,//显示全部列
            //查看人员相片
            visible:false,
            imgsrc:'',
            checked:false,


            default_emptytext:"请点击右侧查询记录",
            showemptytext:'',
        }),
        mounted() {
            if(this.GetUser()==false){
                this.$router.push("/");
            }
            this.GetActiveDwId_DzbId();
        },
        watch: {
            "detailsVisible":{
                handler(){
                    this.addperson_show=false;
                    if(this.detailsVisible==true){
                        if(this.$store.state.user.operation<=2 && this.$store.state.Dw_DzbID.dzbid>0)
                        {
                            this.addperson_show=true;
                        }
                    }
                }
            }
        },
        components: {
            personedit,
            personeditliuzhuan
        },
        methods: {
            ...mapActions(['GetPersons','GetUser','GetActiveDwId_DzbId','GetZbByIdstate']),
            serch(){
                let _this=this;
                this.DataIn.showpersons=[];
                this.GetPersons()
                .then(function(data){
                    if(data.length==0){
                        _this.showemptytext='没有记录';
                        setTimeout(() => {
                            _this.showemptytext=_this.default_emptytext;
                        }, 1000);
                    }
                    else{
                         _this.Formaterperson(data);
                    }
                   
                })
            },
            async Formaterperson(data){//转换一下
                for (let index = 0; index < data.length; index++) {
                    const personOne = data[index];
                    let operations=this.$refs.personedit.$data.operations.filter(function(operation){
                        return operation.id==personOne.operation;
                    })
                    personOne.operation=operations[0].name;
                    let back=await this.GetZbByIdstate({
                        dwid:personOne.dwid,
                        dzbid:-1,
                    })
                    if(typeof back==="object"){
                        personOne.dwname=back.alias;
                    }
                    back=await this.GetZbByIdstate({
                        dwid:personOne.dwid,
                        dzbid:personOne.dzbid,
                    })
                    if(typeof back==="object"){
                        personOne.dzbname=back.alias;
                    }
                    back=await this.GetZbByIdstate({
                        dwid:personOne.banzjianshedw,
                        dzbid:-1,
                    })
                    if(typeof back==="object"){
                        personOne.banzjianshedwname=back.alias;
                    }
                    else{
                        personOne.banzjianshedwname='';
                    }
                    back=await this.GetZbByIdstate({
                        dwid:personOne.banzjianshedw,
                        dzbid:personOne.banzjianshedzb,
                    })
                    if(typeof back==="object"){
                        personOne.banzjianshedzbname=back.alias;
                    }
                    else{
                        personOne.banzjianshedzbname='';
                    }
                    this.DataIn.showpersons.push(personOne);
                }
            },
            handleView(imgsrc) {
                this.imgsrc = imgsrc;
                this.visible = true;
            },
            showDataTrue(showrecoders,offset){
                this.DataIn.personsTrue=showrecoders;
                this.offset=offset;
            },
            indexf(index){return index+this.offset+1;},
            addperson(type,personThis)
            {
                if(type=='add'){
                    this.$refs.personedit.$data.needZk = true;
                    this.$refs.personedit.$data.isEdit = false;
                }
                else if(type=='edit'){
                    this.$refs.personedit.$data.needZk = false;
                    let rowdataTemp=JSON.parse(JSON.stringify(personThis));
                    if(rowdataTemp.zhiwu=='无'){
                        this.$refs.personedit.$data.zhiwuShow = false;
                    }
                    else
                    {
                        this.$refs.personedit.$data.zhiwuShow = true;
                    }
                    this.$refs.personedit.$data.zhiwudwid=rowdataTemp.banzjianshedw;
                    this.$refs.personedit.$data.zhiwudzbid=rowdataTemp.banzjianshedzb;
                    this.$refs.personedit.$data.imgsrcp=rowdataTemp.img;
                    this.$refs.personedit.$data.rowdata = rowdataTemp;
                    this.$refs.personedit.$data.personIDOK = true;
                    this.$refs.personedit.$data.isEdit = true;
                }
                this.$refs.personedit.$data.dialogVisible = true;
            },
            changeDangWei(value){
                let filterorganizations=this.organizations.filter(function(organization){
                    return organization.alias==value;
                })
                if(filterorganizations.length>0){
                    this.zhibu_organizations=filterorganizations[0].zhibus.dzbs;
                }
            },
            handleCommand(value){
                let personThis=value.data;
                if(value.typed=="edit"){//编辑
                    this.addperson("edit",JSON.parse(JSON.stringify(personThis)));
                }
                else if(value.typed=="tosomewhere"){//流转
                    this.$refs.personeditliuzhuan.$data.rowdataTemp = JSON.parse(JSON.stringify(personThis));
                    this.$refs.personeditliuzhuan.$data.dialogVisible = true;
                }
                else if(value.typed=="update"){//更新
                }
                else if(value.typed=="delete"){//删除
                    this.$confirm('此操作将永久该党员, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.DeletePerson(personThis.personID);
                    }).catch(() => {

                    });

                }
            },
            DeletePerson(personID){
                let _this=this;
                let postdata={
                    type:"deletePerson",
                    split:JSON.stringify({
                        personID:personID
                    })
                }
                this.$Common.AjaxPost(postdata,true)
                .then(function(e){
                    _this.$message("删除成功");
                    _this.serch();
                },function(){
                     _this.$message("操作失败");
                })
                .catch(function(reason) {
                    console.log('catch:', reason);
                });
                
            },
            showDYJF(rowdata)
            {
                this.$refs.dyjf.$data.showDYJFD = true;
                this.$refs.dyjf.$data.persondata = JSON.parse(JSON.stringify(rowdata));;
            }
        }
    }
</script>
<style scoped>
.demo-table-expand {
    font-size: 0;
  }
.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
</style>